<template>
	<view class="index">
		<!-- #ifdef H5 -->
		<YouRan-UI-WeiXinNei-TiShi></YouRan-UI-WeiXinNei-TiShi>
		<!-- #endif -->
		<template v-if="JSON.stringify(YongHu_XiangQing) != '{}'">
			<view
				class="DingBu"
				:style="
					YongHu_XiangQing.banner?'background: url('+YongHu_XiangQing.banner+');':'background: url('+QuanJu_JSON.GeRen_KongJian_BeiJingTu+');'
				">
				<!-- #ifndef H5 -->
				<view class="ZhuangTaiLan-GaoDu"></view>
				<!-- #endif -->
				<view class="TouXiang">
					<image :src="YongHu_XiangQing.avatar" mode="widthFix"></image>
				</view>
				<view class="NiCheng">{{YongHu_XiangQing.nickname}}</view>
				<view class="YongHu-XinXi-XiangGuan">
					<view class="Zuo">
						<view class="HuDong-XinXi">
							<text>{{YongHu_XiangQing.stats.postPublishCount}}帖子</text><view></view>
							<text>{{YongHu_XiangQing.stats.followMeCount}}关注</text><view></view>
							<text>{{YongHu_XiangQing.stats.likeMeCount}}点赞</text>
						</view>
						<view class="YongHu-XinXi">
							<view
								v-if="YongHu_XiangQing.gender == 2"
								style="background-color: rgba(135,208,245, .6)">
								<text class="iconfont icon-nan"></text>
							</view>
							<view
								v-if="YongHu_XiangQing.gender == 3"
								style="background-color: rgba(255,126,141, .6)">
								<text class="iconfont icon-nv"></text>
							</view>
							<view style="background-color:rgba(235,51,49, .6)">
								<text>{{YongHu_XiangQing.roleName}}</text>
							</view>
						</view>
					</view>
					<view class="You">
						<view @click="DianJi_CaoZuo_Ta('follow')">
							{{
								YongHu_XiangQing.interaction.followStatus?
								"已关注":"关注"
							}}
						</view>
					</view>
				</view>
			</view>
			<scroll-view
				class="YouRan-UI-XuanXiangKa-1"
				scroll-x="true">
				<view
					class="XunHuan H2 H2-Line"
					:class="QieHuanKa==1?' Zt-YuanSe':' Zt-ZhanWeiSe'"
					@click="DianJi_QieHuanKa(1)">资料</view>
				<view
					class="XunHuan H3 H3-Line"
					:class="QieHuanKa==2?' Zt-YuanSe':' Zt-ZhanWeiSe'"
					@click="DianJi_QieHuanKa(2)">Ta的帖子</view>
				<view
					class="XunHuan H3 H3-Line"
					:class="QieHuanKa==3?' Zt-YuanSe':' Zt-ZhanWeiSe'"
					@click="DianJi_QieHuanKa(3)">Ta的回复</view>
				<!-- <view
					class="XunHuan H3 H3-Line"
					:class="QieHuanKa==4?' Zt-YuanSe':' Zt-ZhanWeiSe'"
					@click="DianJi_QieHuanKa(4)">Ta的点赞</view>
				<view
					class="XunHuan H3 H3-Line"
					:class="QieHuanKa==5?' Zt-YuanSe':' Zt-ZhanWeiSe'"
					@click="DianJi_QieHuanKa(5)">Ta的关注</view> -->
			</scroll-view>
			<!-- 屏幕 1 资料 -->
			<view class="p1" v-if="QieHuanKa == 1">
				<view class="XunHuan">
					<view class="_Zuo">昵称</view>
					<view class="_You">{{YongHu_XiangQing.nickname}}</view>
				</view>
				<view class="XunHuan">
					<view class="_Zuo">性别</view>
					<view class="_You">
						<text v-if="YongHu_XiangQing.gender == 1">保密</text>
						<text v-if="YongHu_XiangQing.gender == 2">男</text>
						<text v-if="YongHu_XiangQing.gender == 3">女</text>
					</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.birthday">
					<view class="_Zuo">生日</view>
					<view class="_You">{{YongHu_XiangQing.birthday}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.bio">
					<view class="_Zuo">签名</view>
					<view class="_You">{{YongHu_XiangQing.bio?YongHu_XiangQing.bio:YongHu_XiangQing.bioHtml}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.location">
					<view class="_Zuo">位置</view>
					<view class="_You">{{YongHu_XiangQing.location}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.verifiedStatus">
					<view class="_Zuo">认证</view>
					<view class="_You">{{YongHu_XiangQing.verifiedStatus}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.verifiedDateTime">
					<view class="_Zuo">认证时间</view>
					<view class="_You">{{YongHu_XiangQing.verifiedDateTime}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.verifiedDesc">
					<view class="_Zuo">认证介绍</view>
					<view class="_You">{{YongHu_XiangQing.verifiedDesc}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.lastPublishPost">
					<view class="_Zuo">最后发帖</view>
					<view class="_You">{{YongHu_XiangQing.lastPublishPost}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.lastPublishComment">
					<view class="_Zuo">最后回复</view>
					<view class="_You">{{YongHu_XiangQing.lastPublishComment}}</view>
				</view>
				<view class="XunHuan" v-if="YongHu_XiangQing.registerDate">
					<view class="_Zuo">注册日期</view>
					<view class="_You">{{YongHu_XiangQing.registerDate}}</view>
				</view>
				
				<view style="width: 100%;height: 101rpx;"></view>
				<view class="WeiBu-XuanFu">
					<view @click="DianJi_CaoZuo_Ta('follow')">
						<text class="iconfont icon-fabulous"></text>
						<text>
							{{
								YongHu_XiangQing.interaction.followStatus?
								"已关注":"关注"
							}}
						</text>
					</view>
					<view @click="DianJi_CaoZuo_Ta('like')">
						<text class="iconfont icon-good"></text>
						<text>
							{{
								YongHu_XiangQing.interaction.likeStatus?
								"已点赞":"点赞"
							}}
						</text>
					</view>
					<view @click="TanChuang_ZhuangTai = true">
						<text class="iconfont icon-pinglun"></text>
						<text>私聊</text>
					</view>
				</view>
			</view>
			<!-- 屏幕 2 Ta的帖子 -->
			<view class="p2" v-if="QieHuanKa == 2">
				<view class="YouRan-UI-LieBiao-7">
					<template v-if="TaDe_TieZi_LieBiao_ZhuangTai=='YouShuJu'">
						<view
							@click="$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi?pid='+item.pid)"
							class="XunHuan Flex" v-for="item in TaDe_TieZi_LieBiao">
							<view class="Zuo Bj-BeiJingSe Flex">
								<view>{{item.commentCount}}</view>
								<view>回复</view>
							</view>
							<view class="Zhong Flex">
								<view>{{item.likeCount}}</view>
								<view>点赞</view>
							</view>
							<view class="You Flex">
								<view class="H2-Line YiHang">
									{{item.title?item.title:$_GuoLv_HTML(item.content)}}
								</view>
								<view class="XinXi Flex">
									<view class="YongHu Flex">
										<view><image :src="item.creator.avatar" mode="widthFix"></image></view>
										<text>{{item.creator.nickname}}</text>
									</view>
									<view class="ShiJian">{{item.createTimeFormat}}</view>
									<view class="LanMu" v-if="item.group"># {{item.group.gname}}</view>
								</view>
							</view>
						</view>
						<view
							@click="QingQiu_TaDe_TieZi('FanYe')"
							class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
							style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
					</template>
					<template v-if="TaDe_TieZi_LieBiao_ZhuangTai=='JiaZaiZhong'">
						<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
					</template>
					<template v-if="TaDe_TieZi_LieBiao_ZhuangTai=='WuShuJu'">
						<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
							<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
							<view class="Zt-ZhanWeiSe">暂无任何数据</view>
						</view>
					</template>
				</view>
			</view>
			<!-- 屏幕 3 Ta的回复 -->
			<view class="p3" v-if="QieHuanKa == 3">
				<template v-if="TaDe_HuiFu_LieBiao_ZhuangTai=='YouShuJu'">
					<view
						class="XunHuan"
						v-for="item in TaDe_HuiFu_LieBiao"
						@click="$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi?pid='+item.post.pid)">
						<view class="NeiRong"><text class="Zt-LanSe">回复内容：</text>{{$_GuoLv_HTML(item.content)}}<text class="ShiJian">{{item.createTimeFormat}}</text></view>
						<view class="YuanTie YiHang">原帖：{{item.post.title?item.post.title:$_GuoLv_HTML(item.post.content)}}</view>
					</view>
					<view
						@click="QingQiu_TaDe_HuiFu('FanYe')"
						class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
						style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
				</template>
				<template v-if="TaDe_HuiFu_LieBiao_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="TaDe_HuiFu_LieBiao_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
			<!-- 屏幕 4 Ta的点赞 -->
			<view class="p4" v-if="QieHuanKa == 4">
				
			</view>
			<!-- 屏幕 5 Ta的关注 -->
			<view class="p5" v-if="QieHuanKa == 5">
				
			</view>
		</template>
		<template v-else>
			<YouRan-UI-JiaZaiZhong LeiXing="QuanPing"></YouRan-UI-JiaZaiZhong>
		</template>
		
		<view class="TanChuang-SiLiao" v-if="TanChuang_ZhuangTai">
			<view class="Shang" @click="TanChuang_ZhuangTai = false">
				<text>对 Ta 说</text>
				<text class="iconfont icon-close-bold"></text>
			</view>
			<view class="Xia">
				<input maxlength="-1" type="text" v-model="Vmodel_SiLiao_NeiRong">
				<text @click="$_TiaoZhuan('_Z_GongYong/BiaoQing_LieBiao','Token')">😀</text>
				<view @click="DianJi_FaSong_SiLiao">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				QuanJu_JSON:{},
				YongHu_XiangQing:{},
				uidOrUsername:"",
				QieHuanKa:1,
				TanChuang_ZhuangTai:false,
				Vmodel_SiLiao_NeiRong:"",
				
				TaDe_TieZi_LieBiao:[],
				TaDe_TieZi_LieBiao_ZhuangTai:"JiaZaiZhong",
				TaDe_TieZi_LieBiao_YeMa:2,
				
				TaDe_HuiFu_LieBiao:[],
				TaDe_HuiFu_LieBiao_ZhuangTai:"JiaZaiZhong",
				TaDe_HuiFu_LieBiao_YeMa:2,
			}
		},
		mounted() {
			uni.$on('BiaoQing_LieBiao_HuiTiao',(data) => {
				this.Vmodel_SiLiao_NeiRong += data.msg
			})
		},
		onLoad(e) {
			if(e.username){
				this.uidOrUsername = e.username;
			}else{
				this.uidOrUsername = e.uid;
			}
			this.QingQiu_QuanJu_JSON();
		},
		methods: {
			QingQiu_QuanJu_JSON(){
				uni.request({
					url:this.$_PeiZhi_WenJian()+"QuanJu.json",
					method:'GET',
					success: (res) => {
						this.QuanJu_JSON = res.data;
						this.QingQiu_YongHu_XiangQing();
					}
				})
			},
			QingQiu_YongHu_XiangQing(){
				this.$_QingQiu(
					"GET","/api/v2/user/"+this.uidOrUsername+"/detail",{},
					(res) => {
						this.YongHu_XiangQing = res.data.data.detail;
					}
				)
			},
			// 点击，操作，Ta
			DianJi_CaoZuo_Ta(e){
				uni.showLoading();
				this.$_QingQiu(
					"POST","/api/v2/user/mark",
					{
						"interactionType":e,
						"markType":"user",
						"fsid":this.uidOrUsername
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.QingQiu_YongHu_XiangQing();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 点击，切换卡
			DianJi_QieHuanKa(e){
				this.QieHuanKa = e;
				if(e == 1){
					this.QingQiu_YongHu_XiangQing();
				}
				if(e == 2){
					this.QingQiu_TaDe_TieZi();
				}
				if(e == 3){
					this.QingQiu_TaDe_HuiFu();
				}
			},
			QingQiu_TaDe_TieZi(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/post/list",
					{
						"uidOrUsername":this.uidOrUsername,
						"whitelistKeys":"pid,commentCount,likeCount,title,content,creator.avatar,creator.nickname,createTimeFormat,group.gname",
						"page":FanYe ? this.TaDe_TieZi_LieBiao_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.TaDe_TieZi_LieBiao = this.TaDe_TieZi_LieBiao.concat(res.data.data.list);
								this.TaDe_TieZi_LieBiao_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							this.TaDe_TieZi_LieBiao = res.data.data.list;
							if(this.TaDe_TieZi_LieBiao){
								this.TaDe_TieZi_LieBiao_ZhuangTai = "YouShuJu"
							}else{
								this.TaDe_TieZi_LieBiao_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
			QingQiu_TaDe_HuiFu(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/comment/list",
					{
						"uidOrUsername":this.uidOrUsername,
						"whitelistKeys":"content,createTimeFormat,post.pid,post.title,post.content",
						"page":FanYe ? this.TaDe_HuiFu_LieBiao_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.TaDe_HuiFu_LieBiao = this.TaDe_HuiFu_LieBiao.concat(res.data.data.list);
								this.TaDe_HuiFu_LieBiao_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							this.TaDe_HuiFu_LieBiao = res.data.data.list;
							if(this.TaDe_HuiFu_LieBiao){
								this.TaDe_HuiFu_LieBiao_ZhuangTai = "YouShuJu"
							}else{
								this.TaDe_HuiFu_LieBiao_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
			DianJi_FaSong_SiLiao(){
				uni.showLoading({ title: "发送中" });
				this.$_QingQiu(
					"POST","/api/v2/conversation/send-message",
					{
						"uidOrUsername":this.uidOrUsername,
						"message":this.Vmodel_SiLiao_NeiRong
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.Vmodel_SiLiao_NeiRong = "";
							uni.showToast({
								title:"发送成功",
								icon:"none",
								duration:1000
							});
							this.TanChuang_ZhuangTai = false
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss">
.index{
	.DingBu{
		// #ifdef H5
		padding-top: 25rpx;
		// #endif
		width: 100%;
		height: 500rpx;
		background-size: 100%;
		.TouXiang{
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 100%;
			border: 5rpx solid $BeiJingSe;
			margin: 85rpx 0 0 25rpx;
		}
		.NiCheng{
			color: #FFF;
			margin: 25rpx 0 0 25rpx;
			font-size: 40rpx;
			line-height: 40rpx;
		}
		.YongHu-XinXi-XiangGuan{
			display: flex;
			align-items: center;
			margin-top: 25rpx;
			.Zuo{
				flex: 1;
				.HuDong-XinXi{
					
					display: flex;
					align-items: center;
					text{
						display: block;
						font-size: 32rpx;
						line-height: 32rpx;
						height: 32rpx;
						color: #FFF;
						padding: 0 25rpx 25rpx 25rpx;
					}
					view{
						margin-bottom: 25rpx;
						width: 1rpx;
						height: 32rpx;
						background: #FFF;
					}
				}
				.YongHu-XinXi{
					display: flex;
					align-items: center;
					view{
						margin-left: 25rpx;
						display: flex;
						align-items: center;
						background: rgba(108,108,108,0.6);
						border-radius: 100rpx;
						padding: 10rpx 15rpx;
						text{
							font-size: 22rpx;
							line-height: 22rpx;
							color: #FFF;
						}
					}
				}
			}
			.You{
				view{
					font-size: 28rpx;
					line-height: 28rpx;
					border: 1rpx solid $JuHuang;
					color: $JuHuang;
					margin-right: 25rpx;
					border-radius: 100rpx;
					padding: 10rpx 15rpx;
				}
			}
		}
	}
	.p1{
		.XunHuan{
			margin: 0 25rpx;
			border-bottom: 1rpx solid $BeiJingSe;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			._Zuo{
				line-height: 32rpx;
				flex-shrink: 0;
				margin-right: 25rpx;
			}
			._You{
				flex: 1;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: $ZhanWeiSe;
				line-height: 50rpx;
			}
		}
		.WeiBu-XuanFu{
			width: 100%;
			height: 100rpx;
			border-top: 1rpx solid $BianKuangSe;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			background: $BeiJingSe;
			display: flex;
			view{
				width: 33.333%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont{
					padding: 0 5rpx 0 0;
					font-size: 40rpx;
					line-height: 40rpx;
				}
			}
		}
	}
	.p3{
		.XunHuan{
			background: $BeiJingSe;
			margin: 25rpx 25rpx 0 25rpx;
			padding: 15rpx 20rpx 20rpx 20rpx;
			.NeiRong{
				font-size: 28rpx;
				line-height: 40rpx;
				.Zt-LanSe{
					
				}
				.ShiJian{
					color: $ZhanWeiSe;
					font-size: 22rpx;
					padding-left: 10rpx;
				}
			}
			.YuanTie{
				font-size: 28rpx;
				line-height: 28rpx;
				color: $ZhanWeiSe;
				margin-top: 10rpx;
			}
		}
	}
	.TanChuang-SiLiao{
		width: 600rpx;
		position: fixed;
		z-index: 999999;
		top: 300rpx;
		left: 75rpx;
		background: #FFF;
		border: 1rpx solid $BianKuangSe;
		border-radius: 15rpx;
		overflow: hidden;
		.Shang{
			display: flex;
			align-items: center;
			justify-content:space-between;
			border-bottom: 1rpx solid $BianKuangSe;
			padding: 20rpx 25rpx;
			background: $LanSe;
			text{
				color: #FFF;
			}
		}
		.Xia{
			display: flex;
			align-items: center;
			margin:25rpx;
			input{
				flex: 1;
				background: $BianKuangSe;
				height: 80rpx;
				padding: 0 15rpx;
				font-size: 28rpx;
				border-radius: 15rpx;
			}
			text{
				font-size: 40rpx;
				padding: 0 15rpx;
			}
			view{
				height: 80rpx;
				line-height: 28rpx;
				background: $HongSe;
				color: #FFF;
				padding: 0 15rpx;
				display: flex;
				align-items: center;
				border-radius: 15rpx;
			}
		}
	}
}
</style>
